<template>
	<ul class="v-router-link">
		<router-link
			v-for="(item, index) in routerLink"
			:key="index"
			:to="item.path"
			:class="{ 'router-link-no-right': index === routerLink.length - 1 }"
			tag="li"
			active-class="v-router-link-active">
			{{ item.title }}
		</router-link>
	</ul>
</template>

<script>
export default {
  name: 'VRouterLink',
  props: {
    routerLink: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.v-router-link {
	height: 40px;
	border-bottom: 1px solid #e6e6e6;
}

.v-router-link li {
	float: left;
	height: 38px;
	font-size: 16px;
	color: #333;
	padding: 0 30px;
	margin-right: 17px;
	cursor: pointer;
	position: relative;
}

.v-router-link li:after {
	content: '';
	display: block;
	width: 1px;
	height: 16px;
	background-color: #e6e6e6;
	position: absolute;
	top: 6px;
	right: -9px;
}

.v-router-link li:hover {
	color: #ff600a;
}

.v-router-link .router-link-no-right {
	margin-right: 0;
}

.v-router-link .router-link-no-right:after {
	display: none;
}

.v-router-link .v-router-link-active {
	color: #ff600a;
	border-bottom: 2px solid #ff600a;
}
</style>